import React, { useState } from "react";
import styles from './index.module.less'
import { Button, Card, Col, Flex, Input, Layout, Modal, Row, Upload, message } from 'antd';
import type { GetProp, UploadFile, UploadProps } from 'antd';
// npm i antd-img-crop
import ImgCrop from 'antd-img-crop';

type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
const downFileTemplate = () => {
    const [list, setList] = useState([
        {
            id: 1,
            title: '手机'
        },
        {
            id: 2,
            title: '电脑'
        },
    ])
    const [fileList, setFileList] = useState<UploadFile[]>([]);
    const [count, setCount] = useState(1)
    const handleClick = () => {
        setCount(prevState => prevState + 1)
        message.success({
            content: '成功',
            duration: 1,
            onClose: () => {
                message.error({
                    content: '失败',
                    duration: 1,
                    onClose: () => {
                        setCount(prevState => prevState - 1)
                    }
                });

            },
        })
    }
    const handlePush = () => {
        setList([...list, { id: Math.random(), title: '新数据' }])
        message.success('添加成功')
    }
    const [showMask, setShowMask] = useState(false)
    const onPreview = async (file: UploadFile) => {
        let src = file.url as string;
        if (!src) {
            src = await new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj as FileType);
                reader.onload = () => resolve(reader.result as string);
            });
        }
        const image = new Image();
        image.src = src;
        const imgWindow = window.open(src);
        imgWindow?.document.write(image.outerHTML);
    };

    const downTemplate = () => {
        // 接口地址
        const interfaceAddress = '/income/download_forecast_template';
        // 后台返回二进制文件
        // content-disposition: attachment; filename*=utf-8''%E6%94%B6%E5%85%A5%E6%B5%8B%E7%AE%97%E6%A8%A1%E6%9D%BF.xlsx 
        // content-length: 9727 
        // content-type: application/octet-stream 
        // date: Thu,12 Dec 2024 06:44:12 GMT 
        // etag: 6dd9d2b2b2789e27c3c023c8694c29ed 
        // last-modified: Tue,10 Dec 2024 07:51:20 GMT 
        // server: nginx/1.24.0

        // 环境地址 接口地址
        window.open('http://172.16.7.234/soams-service' + interfaceAddress)
    }

    return (
        <div className={styles.downFileTemplate}>
            <Row gutter={[5, 50]}>
                <Col span={8}>
                    <Button onClick={downTemplate}>{'后台返回文件流下载模版'}</Button>
                </Col>
                <Col span={8}>
                    <Card title={'卡片标题'} size={'small'}>
                        {'content'}
                    </Card>
                    <Card title={'卡片标题'}>
                        {'content'}
                    </Card>
                    <Card>
                        {'content'}
                    </Card>
                </Col>
                <Col span={8}>
                    <ImgCrop rotationSlider>
                        <Upload
                            listType="picture-card"
                            fileList={fileList}
                            onChange={({ fileList }) => setFileList(fileList)}
                            onPreview={onPreview}
                        >
                            {fileList.length < 1 && `${'上传图片裁剪'}+预览`}
                        </Upload>
                    </ImgCrop>
                </Col>
                <Col span={8} onClick={handlePush}>
                    <Button>{'增加'}</Button>
                </Col>
                <Col span={8}>
                    <Flex wrap={true}>
                        {
                            list.map((item) => {
                                return (
                                    <Button key={item.id}>{item.title}</Button>
                                )
                            })
                        }
                    </Flex>
                </Col>
                <Col span={8}>
                    <Input value={count} />
                </Col>
                <Col span={24}>
                    <Button onClick={handleClick}>{'count'}</Button>
                </Col>
                <Col span={24}>
                    <Button onClick={() => setShowMask(true)}>{'弹出层'}</Button>
                </Col>
            </Row>
            <Modal open={showMask} onOk={() => setShowMask(false)} onCancel={() => setShowMask(false)}>
                <p>{'Some contents...'}</p>
                <p>{'Some contents...'}</p>
                <p>{'Some contents...'}</p>
            </Modal>

        </div>
    )
}

export default downFileTemplate